<template>
  <div>
    <van-swipe :autoplay="5000" :loop=false @change="onChange">
      <van-swipe-item v-for="(image, index) in img" :key="index">
        <van-image fit="cover" class="img" :src="image.img"></van-image>
      </van-swipe-item>
    </van-swipe>
    <!-- <transition name="slide-fade"> -->
    <router-link to="/login">
    <transition leave-active-class="animated fadeOut faster" enter-active-class="animated fadeIn faster">
      <van-button v-if="show" round type="info" size="large">Begin</van-button>
    </transition>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'IndexSwiper',
  props: {
    img: Array
  },
  data: function () {
    return {
      show: false
    }
  },
  methods: {
    onChange (index) {
      if (index === 2) {
        this.show = true
      } else {
        this.show = false
      }
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.van-swipe {
  position: absolute;
  height: 100%;
  width: 100%;
}
.img{
  height: 100%;
  width: auto;
}
.van-button{
    /* background-color: transparent; */
    /* opacity: 0.8; */
    position: absolute;
    bottom: 10%;
    transition: all 0.5s;
}
</style>
